<template>
  <div id="BOX">

    <div
      class="BOX_inside"
      id="BOX_inside_left"
    >
    </div>

    <div
      class="BOX_inside"
      id="BOX_inside_right"
    >
      <rollingLogoVue @click="toChat" class="mypage_roll" />
      <ChangePassword />
    </div>

  </div>
</template>
  
<script setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router";
// import { isLogin } from "../api";
import rollingLogoVue from "../components/icons/rollingLogo.vue";
import ChangePassword from "../components/ChangePassword.vue";

const router = useRouter();
function toChat() {
  router.push('/')
}
</script>
  
<style scoped>
.mypage_roll{
  position: absolute;
  left: 15px;
  top: 15px;
}
#BOX {
  height: 500px;
  width: 800px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  box-shadow: 1px 1px 10px 5px white;
  animation: change 5s ease infinite;
}
.BOX_inside {
  width: 50%;
  height: 100%;
}
#BOX_inside_left {
  background-color: var(--right-yellow);
}
#BOX_inside_right {
  background-color: var(--left-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@keyframes change {
  0% {
    box-shadow: 1px 1px 10px 5px white;
  }
  25% {
    box-shadow: 1px 1px 10px 5px pink;
  }
  50% {
    box-shadow: 1px 1px 10px 5px skyblue;
  }
  75% {
    box-shadow: 1px 1px 10px 5px green;
  }
  100% {
    box-shadow: 1px 1px 10px 5px white;
  }
}
@media screen and (max-width: 800px) {
  #BOX {
    width: 90vw;
  }
  .BOX_inside {
    width: 100%;
    height: 100%;
  }
  #BOX_inside_left {
    width: 0px;
    height: 0px;
  }
}
</style>